<template>
  <div>
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu router :default-active="activePath" :collapse="isCollapse" background-color="#545c64" text-color="#fff"
          active-text-color="#ffd04b">
          <div style="background-color: #545c64;">
            <p
              style="width: 160px;height:40px;background-color: #9ea1a3;margin-left: 20px;line-height: 40px;color:white;border-radius: 10px;">
              旅鼠</p>
          </div>
          <el-menu-item index="/user" @click="saveActiveNav('/user')">
            <router-link to="/user"></router-link>
            <span slot="title"><i class="el-icon-user"></i>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/manage" @click="saveActiveNav('/manage')">
            <router-link to="/manage"></router-link>
            <span slot="title"><i class="el-icon-s-custom"></i>管理员管理</span>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>攻略与景点管理</template>
            <el-menu-item-group>
              <el-menu-item index="/method" @click="saveActiveNav('/method')">
                <router-link to="/method"></router-link>
                官方攻略
              </el-menu-item>
              <el-menu-item index="/essay" @click="saveActiveNav('/essay')">
                <router-link to="/essay"></router-link>
                用户提交攻略
              </el-menu-item>
              <el-menu-item index="/spot" @click="saveActiveNav('/spot')">
                <router-link to="/spot"></router-link>
                景点管理
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/travel" @click="saveActiveNav('/travel')">
            <router-link to="/travel"></router-link>
            <i class="el-icon-phone-outline"></i>驴友管理
          </el-menu-item>
          <el-menu-item index="/comment" @click="saveActiveNav('/comment')">
            <router-link to="/comment"></router-link>
            <i class="el-icon-chat-line-round"></i>评论管理
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-message"></i>举报与帮助管理</template>
            <el-menu-item-group>
              <el-menu-item index="/report" @click="saveActiveNav('/report')">
                <router-link to="/report"></router-link>
                举报管理
              </el-menu-item>
              <el-menu-item index="/help" @click="saveActiveNav('/help')">
                <router-link to="/help"></router-link>
                帮助管理
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; ">
          <el-dropdown style="margin-top: 10px;">
            <span>
              <el-avatar v-if="data.avaimg === ''" icon="el-icon-user-solid"></el-avatar>
              <el-avatar v-else :src="data.avaimg"></el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="showForm">个人信息</el-dropdown-item>
              <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <el-main style="height: 665px;">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog :visible.sync="dialogVisible" title="个人信息">
      <el-form :model="data" label-width="100px">
        <el-form-item label="头像">
          <el-upload class="avatar-uploader" action="http://localhost:3000/subavater" :show-file-list="false"
            :auto-upload="false" :on-change="handleChange" accept=".gif,.jpg,.jpeg,.png,.GIF,.JPG,.bmp" name="img"
            :headers="headers">
            <img v-if="imageUrl != ''" :src="imageUrl" class="avatar">
            <img v-if="data.avaimg != '' && imageUrl == ''" :src="data.avaimg" class="avatar">
            <i v-if="imageUrl == '' && data.avaimg == ''" class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="data.managename"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="data.password"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="data.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="data.email"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="data.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveManage">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 45px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 90px;
  height: 90px;
  line-height: 90px;
  /* text-align: center; */
}

.avatar {
  width: 90px;
  height: 90px;
  display: block;
}
</style>

<script>
export default {
  data() {
    return {
      headers: { enctype: "multipart/form-data" },
      user: "",
      isCollapse: false,
      activePath: "/user",
      data: "",
      dialogVisible: false,
      imageUrl: '',
      imageBase: "",
      result: ""
    };
  },
  created() {
    this.activePath = sessionStorage.getItem("activePath")
      ? sessionStorage.getItem("activePath")
      : "/user";
  },
  methods: {
    saveActiveNav(activePath) {
      sessionStorage.setItem("activePath", activePath);
      this.activePath = activePath
      console.log(this.activePath)
    },
    logout() {
      this.$confirm(`确定要退出登录吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        window.localStorage.removeItem('token')
        sessionStorage.removeItem("activePath")
        this.$router.replace({ path: '/login' });
        location.reload();
      })
    },
    showForm(user) {
      this.editedManage = { ...user, avaimg: user.avaimg && require(`../../../trip-koa/public/manageavater/${user.avaimg}`) }
      this.dialogVisible = true
    },
    // 提交管理员头像到服务器成功
    blobToBase64(blob) {
      return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.onload = (e) => {
          resolve(e.target.result)
        }
        fileReader.readAsDataURL(blob)
        fileReader.onerror = () => {
          reject(new Error("文件流异常"))
        }
      })
    },
    handleChange(file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.blobToBase64(file.raw).then(res => {
        this.imageBase = res
      })
    },
    // 保存用户信息
    saveManage() {
      if (this.data.managename.trim() === '') {
        this.$message.error('姓名不能为空')
        return
      }
      if (this.data.password.trim() === '') {
        this.$message.error('密码不能为空')
        return
      }
      let mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!mailReg.test(this.data.email.trim()) && this.data.email.trim() !== '') {
        this.$message.error("邮箱格式错误，请重新输入")
        return
      }
      this.data.avaimg = this.imageBase
      this.$http
        .post('/editmanage', this.data)
        .then(res => {
          this.$message.success(res.status)
          window.localStorage.setItem("data", JSON.stringify(this.data))
        })
      this.imageUrl = ''
      this.dialogVisible = false
    },
  },
  mounted() {
    this.data = window.localStorage.getItem("data")
    this.data = JSON.parse(this.data)
    this.result = window.localStorage.getItem('result')
    this.result = JSON.parse(this.result)
    if (this.data.id == this.result[0].id) {
      this.data.avaimg = this.result[0].avaimg
    }
    this.data.avaimg = require(`../../../trip-koa/public/manageavater/${this.data.avaimg}`)
  },
}
</script>

